<template>
  <el-dialog
    class="detailDialog"
    v-model="props.detailDialog"
    title="备件详情"
    width="45%"
    :close-on-click-modal="false"
    @close="close"
  >
    <el-row class="row">
      <el-col :span="8">
        <div>备件名称：{{ props.detailForm?.partName }}</div>
      </el-col>
      <el-col :span="8">
        <div>备件编号：{{ props.detailForm?.partNum }}</div>
      </el-col>
      <el-col :span="8">
        <div>预存备件库：{{ props.detailForm?.storehouseName }}</div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="8">
        <div>备件类型：{{ props.detailForm?.partTypeName }}</div>
      </el-col>
      <el-col :span="8">
        <div>
          实际库存：{{
            props.detailForm?.realStock + props.detailForm?.partUnit
          }}
        </div>
      </el-col>
      <!-- <el-col :span="8">
        <div>
          可用库存：{{
            props.detailForm?.availableStock + props.detailForm?.partUnit
          }}
        </div>
      </el-col> -->
    </el-row>
    <el-row class="row">
      <el-col :span="8">
        <div>
          最低安全库存：{{
            props.detailForm?.safeStock + props.detailForm?.partUnit
          }}
        </div>
      </el-col>
      <el-col :span="8">
        <div>预警通知人：{{ props.detailForm?.noticeUserName }}</div>
      </el-col>
      <el-col :span="8">
        <div>
          保质期：{{
            props.detailForm?.qualityPeriod + props.detailForm?.qualityUnit
          }}
        </div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="24">
        <div style="display: flex">
          <div>备件照片：</div>
          <el-image
            v-if="props.detailForm?.picture"
            style="width: 72px; height: 72px"
            :src="props.detailForm?.picture"
            :zoom-rate="1.2"
            :preview-src-list="[props.detailForm?.picture]"
            :initial-index="0"
            fit="cover"
          />
          <span v-else>无</span>
        </div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="24">
        <div>备注信息：{{ props.detailForm?.remark }}</div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="24">
        <div>
          批次信息：
          <div
            v-for="(item, index) in props.detailForm?.partBatchList"
            class="pcInfo"
          >
            <span>{{ index + 1 }}、批次号：{{ item.batchNum }}</span>
            <span>生产日期：{{ item.produceDate }}</span>
            <span>单价：{{ item.price }}元</span>
            <span
              >当前库存：{{
                item.stockAmount + props.detailForm?.partUnit
              }}</span
            >
          </div>
        </div>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const props = defineProps({
  detailDialog: Boolean,
  detailForm: Object
})
const emit = defineEmits(['closeDetail'])
const close = () => {
  emit('closeDetail')
}
</script>
<style scoped lang="scss">
.detailDialog {
  .row {
    font-size: var(--el-font-size-base);
    margin-bottom: 8px;
  }
}

.pcInfo {
  margin-bottom: 8px;

  > span {
    margin-right: 16px;
    font-weight: 400;
    line-height: 22px;
  }
}
</style>
